<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import clusterAddressPoints1 from "@/data/markercluster.points.5w"

export default {
  name: "AddClusterMarker.component",
  components: {Maptalks},
  setup() {

    const onClick = (e) => {
      console.log(e.target);
    }

    let mapOnLoadCB = (map) => {

      let markers = [];
      // data from markercluster.points.5w.js
      for (let i = 0; i < clusterAddressPoints1.length; i++) {
        let ca1 = clusterAddressPoints1[i];
        markers.push(new maptalks.Marker([ca1[1], ca1[0]]).on("mousedown", onClick));
      }

      let clusterLayer = new maptalks.ClusterLayer(MapLayerConst.MAP_CLUSTER_LAYER, markers, {
        "noClusterWithOneMarker": false,
        "maxClusterZoom": 18,
        //"count" is an internal letiable: marker count in the cluster.
        "symbol": {
          "markerType": "ellipse",
          "markerFill": {
            property: "count",
            type: "interval",
            stops: [[0, "rgb(135, 196, 240)"], [9, "#1bbc9b"], [99, "rgb(216, 115, 149)"]]
          },
          "markerFillOpacity": 0.7,
          "markerLineOpacity": 1,
          "markerLineWidth": 3,
          "markerLineColor": "#fff",
          "markerWidth": {property: "count", type: "interval", stops: [[0, 40], [9, 60], [99, 80]]},
          "markerHeight": {property: "count", type: "interval", stops: [[0, 40], [9, 60], [99, 80]]}
        },
        "drawClusterText": true,
        "geometryEvents": true,
        "single": true
      });

      map.addLayer(clusterLayer);
      map.setCenter([117.2721598, 23.8133062833])
      map.setZoom(12)
      map.on("click", function (e) {
        console.log(clusterLayer.identify(e.coordinate));
      });

    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>